<script setup lang="ts">
import { ref } from "vue";
import {
  Empty,
  Button,
  Image as VanImage,
  Cell,
  CellGroup,
  RadioGroup,
  Radio,
} from "vant";
import { useRouter } from "vue-router";
const checked = ref("1");
</script>

<template>
  <div class="device-box">
  <div style="height:50px;"></div>
    <VanImage
      class="title-icon"
      width="100%"
      src="/src/assets/1.png"
    />
    <div>
      <CellGroup inset>
        <Cell style="color: #999" title="请选择一个设备" value="" />
        <div>
          <RadioGroup v-model="checked">
            <div class="device-list">
              <div>
                <VanImage width="100" src="/src/assets/device-icon.png" />
              </div>
              <div class="device-name">T86智能锁</div>
              <div>
                <Radio name="1" icon-size="32px" checked-color="#fdb404"></Radio>
              </div>
            </div>
            <div class="device-list">
              <div>
                <VanImage width="100" src="/src/assets/device-icon.png" />
              </div>
              <div class="device-name">Q5M</div>
              <div>
                <Radio name="2" icon-size="32px" checked-color="#fdb404"></Radio>
              </div>
            </div>
          </RadioGroup>
        </div>
      </CellGroup>
    </div>
    <div style="height:40px;"></div>
  </div>
</template>

<style lang="less" scoped>
.device-box {
  width: 100%;
  min-height: 100%;
  background: url(/src/assets/2.png) top left no-repeat #ffffff;
  background-size: 100% auto;
}
.device-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid rgb(153 153 153 / 20%);
  padding: 10px;
}
.device-list:last-child {
  border-bottom: 0;
}
.device-name {
  color: #6e7b8c;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 21px;
  flex: 1;
}
.title-icon .van-image__img {
  width: 90%;
  margin: 0 auto;
}
</style>
